<template>
    <el-card class="box-card">
        <el-text class="mx-1" type="primary">字符串转Base64</el-text>
        <el-row :gutter="10">
            <el-col :span="24">
                <el-input v-model="textarea" :rows="4" type="textarea" @focus ="changeText = null" @blur=change placeholder="输入要加密Base64字符串" />
            </el-col>
            <el-col :span="24">
                <el-input v-model="changeText" :rows="7" type="textarea" placeholder="加密后的字符串" :disabled="true" />
            </el-col>
        </el-row>
    </el-card>
    <el-card class="box-card">
        <el-text class="mx-1" type="primary">Base64转字符串</el-text>
        <el-row :gutter="10">
            <el-col :span="24">
                <el-input v-model="Basetext" :rows="4" type="textarea" @focus ="unlockText = null" @blur=change2 placeholder="输入要Base64字符串" />
            </el-col>
            <el-col :span="24">
                <el-input v-model="unlockText" :rows="7" type="textarea" placeholder="解密结果" :disabled="true" />
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup >
import { ref } from 'vue';
import { Base64 } from 'js-base64';
const textarea = ref('');
const changeText = ref('');
const Basetext = ref('');
const unlockText = ref('');
const change = () => {
    changeText.value = Base64.encode(encodeURIComponent(textarea.value));
}
const change2 = () => {
    unlockText.value = Base64.decode(Basetext.value);
}
</script>
<style scoped lang="scss">
.el-col {
    margin-top: 10px;
}
</style>